<!--
 * @Author: your name
 * @Date: 2021-09-07 18:04:25
 * @LastEditTime: 2021-09-18 21:59:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\role\roles.vue
-->
<template>
  <div class="production">
    <div class="btns">
      <!-- 检索框 -->
      <el-form :inline="true" :model="params" size="small">
        <el-button
          @click="toAddHandler"
          type="primary"
          size="small"
          style="margin-right: 10px"
          >添加</el-button
        >
        <el-form-item>
          <el-input v-model="params.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="params.status" placeholder="请选择状态">
            <el-option label="禁用" value="禁用"></el-option>
            <el-option label="正常" value="正常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="params.roleId"
            placeholder="请选择角色"
            clearable
          >
            <el-option
              v-for="(item, index) of categories"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="pageQueryProductions"
          icon="el-icon-search"
          >查询</el-button
        >
      </el-form>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table :data="resData.list" style="width: 100%" size="small">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="realname"></el-table-column>
        <el-table-column label="角色" prop="roles[0].name">
            <!-- <template v-slot="scope">
                {{scope.row.roles.name}}
            </template> -->
        </el-table-column>
        <el-table-column label="性别" prop="gender"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.status == '正常'"
              size="mini"
              type="success"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag v-else size="mini" type="danger">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="telephone"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="setHandler(scope.row)" style="color:black">设置</el-button>
            <el-button type="text" @click="delHandler(scope.row.id)" style="color:red">删除</el-button>
            <el-button type="text" @click="editHandler(scope.row)" style="color:green">编辑</el-button>
            <el-button type="text" @click="todetailHandler(scope.row.id)" style="color:blue">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next, sizes,jumper"
          :total="resData.total"
          :page-size="params.pageSize"
          :current-page="params.page"
          @current-change="pageChangeHandler"
          :page-sizes="[5, 10, 15]"
          @size-change="pageSizeChangeHandler"
      >
      </el-pagination>
      </div>
      <!--添加、编辑模态框 -->
      <el-dialog
        :title="title"
        :visible.sync="addvisible"
        @close="dialogCloseHandler"
      >
        <el-form :model="production" :rules="rules" ref="saveForm">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input v-model="production.username"></el-input>
          </el-form-item>
          <el-form-item
            label="姓名"
            :label-width="formLabelWidth"
            prop="realname">
            <el-input v-model="production.realname"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth"
            prop="password"
          >
            <el-input v-model="production.password"></el-input>
          </el-form-item>
         <el-form-item
            label="性别"
            :label-width="formLabelWidth"
            prop="gender"
          >
                <el-radio v-model="radio" label="male">男</el-radio>
                <el-radio v-model="radio" label="female">女</el-radio>
          </el-form-item>
         <el-form-item
            label="角色"
            :label-width="formLabelWidth"
            prop="roles[0].name"
          >
                <el-radio v-model="role" label="员工">员工</el-radio>
                <el-radio v-model="role" label="管理员">管理员</el-radio>
                <el-radio v-model="role" label="顾客">顾客</el-radio>
          </el-form-item>
        <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="telephone"
          >
            <el-input v-model="production.telephone"></el-input>
          </el-form-item>
          <el-form-item
            label="出生日期"
            :label-width="formLabelWidth"
            prop="birth">
            <el-date-picker
                v-model="value"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSavehandler">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 设置模态框 -->
      <el-dialog
        title="设置角色"
        :visible.sync="visible"
        @close="dialogCloseHandler"
      >
      <div>角色</div>
        <el-form :model="setproduction" ref="saveForm">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <!-- <el-select placeholder="请选择">
              <el-option>员工</el-option>
              <el-option>管理员</el-option>
              <el-option>顾客</el-option>
            </el-select> -->
            <el-select v-model="params.roleId" clearable placeholder="请选择角色">
              <!-- 栏目是根据名字来选择的，传递数据（即value）是通过id -->
              <el-option 
                 v-for="(item,index) of categories"
                 :label="item.name"
                 :value="item.id"
                 :key="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSavehandler">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import requset from "@/utils/request";
import { mapActions } from "vuex";
import qs from "qs";
import _ from "lodash";
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      value:"",
      radio:'male',
      title:'',
      role:"",
      roles:{},
      resData: {},
      categories: [],
      visible: false,
      addvisible:false,
      production: {},
      setproduction:{},
      formLabelWidth: "80px",
      imageUrl: null,
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        realname: [
          {required: true, message: "姓名不能为空", trigger: "blur"},
        ],
        password:[
          {required: true, message: "密码不能为空", trigger: "blur"}
        ],
        // gender: [
        //   { required: true ,trigger: "change"},
        // ],
         roleId: [{ required: true,trigger: "change"}],
      },
    };
  },
  methods: {
    // 导入状态机中的方法
    ...mapActions("role",["findAllRole"]),
    // 分页查询产品表格
    async pageQueryProductions() {
      // 过滤数据将空字符串删除
      for (let key in this.params) {
        if (this.params[key] == "") {
          delete this.params[key];
        }
      }
      let res = await requset.get("/baseUser/pageQuery", {
        params: this.params,
      });
      this.resData = res.data;
    },
    // page改变事件
    pageChangeHandler(page) {
      this.params.page = page;
      this.pageQueryProductions();
    },
    // pageSize改变事件
    pageSizeChangeHandler(pageSize) {
      this.params.pageSize = pageSize;
      this.pageQueryProductions();
    },
    // 新增按钮点击事件
    toAddHandler() {
      this.visible=false;
      this.production = {};
      this.radio = null;
      this.role=null;
      this.value=null;
      this.title = "添加用户信息";
      this.addvisible = true;
    },
    // 设置按钮点击事件
    setHandler(){
      this.addvisible=false;
      this.setproduction = {};
      this.visible = true;
    },
    // 表单保存事件
    toSavehandler() {
      this.$refs["saveForm"].validate((valid) => {
        if (valid) {
          requset
            .post("/baseUser/saveOrUpdate", qs.stringify(this.production))
            .then((res) => {
              this.pageQueryProductions(); // 重载数据
              this.$message.success(res.message); // 提示操作结果信息
              this.addvisible = false; // 关闭添加编辑模态框
              this.visible=false;//关闭设置模态框
            });
        } else {
          return false;
        }
      });
    },
    // 模态框关闭的回调
    dialogCloseHandler() {
      this.$refs["saveForm"].resetFields(); // 置空表单验证
    },
    // 编辑按钮点击事件
    editHandler(row) {
      this.visible=false;
      this.production = _.clone(row); // 将当前行数据赋值给数据模型
      this.radio = row.gender;
      this.role=row.roles[0].name;
      this.title = "编辑用户信息";
      this.addvisible = true;
    },
    // 删除当前行数据
    delHandler(id) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        requset.get("/baseUser/deleteById", { params: { id } }).then((res) => {
          this.pageQueryProductions(); // 刷新数据
          this.$message({
            type: "success",
            message: res.message,
          }); // 提示成功信息
        });
      });
    },
    // 详情点击事件
    todetailHandler(id){
      this.$router.push({
        path: "detail",
        query: { id },
      });
    }
  },
  created() {
    this.pageQueryProductions(); // 分页查询产品
    this.findAllRole().then((res) => {
      this.categories = res.data;
    }); // 查询所有产品栏目
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.page{
  margin-left: 65%;
  margin-top: 2%;
}
</style>